<template>
  <div class="overView">
    <!-- 告警数量统计 -->
    <div class="overView-top">
      <div class="overView-count" v-for="(item, index) in alarmlist" :key="index">
        <p :class="'overView-count-img overView-count-img' + index"></p>
        <div>
          <p>{{ item.name }}</p>
          <span>{{ item.value }}</span>条
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="overView-center">
      <!-- 饼图 -->
      <div class="overView-center-box">
        <div class="box-title">
          <div class="box-title-font"><span></span>{{switchActive1=='1'?'告警':'故障'}}等级分析</div>
          <div class="switch-btn">
            <span v-for="(item, index) in switchList" :key="index"
              :class="switchActive1 == item.value ? 'switch-btn-active' : 'switch-btn-default'" style="margin:0 2px;"
              @click="queryAlarmPie1(item.value)">
              {{ item.name }}
            </span>
          </div>
        </div>
        <alarmPieChart ref="alarmPieChart1" />
      </div>
      <!-- 饼图 -->
      <div class="overView-center-box">
        <div class="box-title">
          <div class="box-title-font"><span></span>{{switchActive2=='1'?'告警':'故障'}}状态数量统计</div>
          <div class="switch-btn">
            <span v-for="(item, index) in switchList" :key="index"
              :class="switchActive2 == item.value ? 'switch-btn-active' : 'switch-btn-default'" style="margin:0 2px;"
              @click="queryAlarmPie2(item.value)">
              {{ item.name }}
            </span>
          </div>
        </div>
        <alarmPieChart ref="alarmPieChart2" />
      </div>
      <!-- 系统告警排行 -->
      <div class="overView-center-box">
        <div class="box-title">
          <div class="box-title-font"><span></span>系统{{switchActive3=='1'?'告警':'故障'}}排行</div>
          <div class="switch-btn">
            <span v-for="(item, index) in switchList" :key="index"
              :class="switchActive3 == item.value ? 'switch-btn-active' : 'switch-btn-default'" style="margin:0 2px;"
              @click="queryAlarmRank(item.value)">
              {{ item.name }}
            </span>
          </div>
        </div>
        <alarmRank ref="alarmRank" :items="alarmRankList"/>
      </div>
    </div>
    <!-- 告警趋势-折线图 -->
    <div class="overView-bottom">
      <div class="box-title">
        <div class="box-title-font"><span></span>{{switchActive4=='1'?'告警':'故障'}}趋势</div>
        <div class="switch-btn">
          <span v-for="(item, index) in switchList" :key="index"
            :class="switchActive4 == item.value ? 'switch-btn-active' : 'switch-btn-default'" style="margin:0 2px;"
            @click="queryAlarmLine(item.value)">
            {{ item.name }}
          </span>
        </div>
      </div>
      <alarmLineChart ref="alarmLineChart"/>
    </div>
  </div>
</template>

<script>
import { alarmTotalnum, alarmTierAnalysis, faultTierAnalysis, alarmTypeNumCount, faultTypeNumCount, sysAlarmRanking, sysFaultRanking, alarmTrend, faultTrend } from "@/api/oneself/overView";
import alarmPieChart from './alarmPieChart.vue';
import alarmRank from './alarmRank.vue';
import alarmLineChart from "./alarmLineChart.vue";

export default {
  name: "overView",
  data() {
    return {
      menucode: localStorage.getItem('menucode'),
      alarmlist: [],
      switchList: [{
        name: "告警",
        value: 1
      },
      {
        name: "故障",
        value: 2
      }],
      switchActive1: 1,
      switchActive2: 1,
      switchActive3: 1,
      switchActive4: 1,
      alarmRankList: [],
    };
  },
  components: { alarmPieChart, alarmRank, alarmLineChart },
  methods: {
    // 告警数量统计
    async queryAlarmTotalnum() {
      const data = await alarmTotalnum({ mkId: this.menucode });
      if (data && data.code === 200) {
        this.alarmlist = data.body
      } else {
        this.$message.error(data.message);
      }
    },
    // 告警等级分析 - 故障等级分析
    async queryAlarmPie1(val) {
      this.switchActive1 = val;
      if (val == 1) {
        const data = await alarmTierAnalysis({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.$refs.alarmPieChart1.pieData = data.body;
            this.$refs.alarmPieChart1.echartsInit();
          });
        } else {
          this.$message.error(data.message);
        }
      } else {
        const data = await faultTierAnalysis({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.$refs.alarmPieChart1.pieData = data.body;
            this.$refs.alarmPieChart1.echartsInit();
          });
        } else {
          this.$message.error(data.message);
        }
      }
    },
    // 告警类别数量统计 - 故障类别数量统计
    async queryAlarmPie2(val) {
      this.switchActive2 = val;
      if (val == 1) {
        const data = await alarmTypeNumCount({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.$refs.alarmPieChart2.pieData = data.body;
            this.$refs.alarmPieChart2.echartsInit();
          });
        } else {
          this.$message.error(data.message);
        }
      } else {
        const data = await faultTypeNumCount({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.$refs.alarmPieChart2.pieData = data.body;
            this.$refs.alarmPieChart2.echartsInit();
          });
        } else {
          this.$message.error(data.message);
        }
      }
    },
    // 系统告警排行 - 系统故障排行
    async queryAlarmRank(val) {
      this.switchActive3 = val;
      if (val == 1) {
        const data = await sysAlarmRanking({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.alarmRankList = data.body;
          });
        } else {
          this.$message.error(data.message);
        }
      } else {
        const data = await sysFaultRanking({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.alarmRankList = data.body;
          });
        } else {
          this.$message.error(data.message);
        }
      }
    },
    // 告警趋势 - 故障趋势
    async queryAlarmLine(val) {
      this.switchActive4 = val;
      if (val == 1) {
        const data = await alarmTrend({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.$refs.alarmLineChart.lineData = data.body;
            this.$refs.alarmLineChart.echartsInit();
          });
        } else {
          this.$message.error(data.message);
        }
      } else {
        const data = await faultTrend({ mkId: this.menucode });
        if (data && data.code === 200) {
          this.$nextTick(() => {
            this.$refs.alarmLineChart.lineData = data.body;
            this.$refs.alarmLineChart.echartsInit();
          });
        } else {
          this.$message.error(data.message);
        }
      }
    },
    init() {
      this.queryAlarmTotalnum();
      this.queryAlarmPie1(this.switchActive1);
      this.queryAlarmPie2(this.switchActive2);
      this.queryAlarmRank(this.switchActive3);
      this.queryAlarmLine(this.switchActive4);
    },
  },
  created() {
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
  },
};
</script>

<style scoped lang="scss">
.overView {
  width: 100%;
  min-height: calc(100vh - 84px);
  background: #EBEEF1;
  padding: 20px 15px;

  .overView-top {
    width: 100%;
    height: 115px;
    display: flex;
    justify-content: space-around;

    .overView-count {
      width: 275px;
      height: 112px;
      margin: 0 10px;
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid #E6EAEE;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .overView-count-img {
      display: inline-block;
      width: 62px;
      height: 60px;
      margin-right: 30px;
      vertical-align: middle;
    }

    .overView-count-img0 {
      background: url("../../../assets/images/alarm_topImg1.png") no-repeat center/ 100% 100%;
    }

    .overView-count-img1 {
      background: url("../../../assets/images/alarm_topImg2.png") no-repeat center/ 100% 100%;
    }

    .overView-count-img2 {
      background: url("../../../assets/images/alarm_topImg3.png") no-repeat center/ 100% 100%;
    }

    .overView-count-img3 {
      background: url("../../../assets/images/alarm_topImg1.png") no-repeat center/ 100% 100%;
    }

    .overView-count-img4 {
      background: url("../../../assets/images/alarm_topImg5.png") no-repeat center/ 100% 100%;
    }

    .overView-count-img5 {
      background: url("../../../assets/images/alarm_topImg6.png") no-repeat center/ 100% 100%;
    }

    div {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      color: #434648;
      text-align: left;
      vertical-align: middle;

      span {
        font-size: 24px;
        color: #333333;
        margin-right: 5px;
      }

      p {
        margin-top: 0;
      }
    }
  }

  .overView-center {
    width: 100%;
    margin: 15px 0;
    display: flex;
    justify-content: space-around;

    .overView-center-box {
      width: 546px;
      height: 340px;
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid #E6EAEE;
      padding: 20px;
    }
  }

  .overView-bottom {
    width: calc(100% - 20px);
    height: 337px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E6EAEE;
    padding: 20px;
    margin-left: 10px;
  }

  .box-title {
    display: flex;
    justify-content: space-between;

    .box-title-font {
      font-weight: 600;
      font-size: 18px;
      color: #333333;

      span {
        display: inline-block;
        width: 4px;
        height: 12px;
        background: #0C2D53;
        margin-right: 5px;
      }
    }

    .switch-btn {
      width: 120px;
      height: 27px;
      background: #E3E3E3;
      border-radius: 15px;
      padding: 3px 0;
      font-weight: 400;
      font-size: 14px;
      text-align: center;

      .switch-btn-default {
        display: inline-block;
        width: 53px;
        height: 20px;
        border-radius: 15px;
        color: #999999;
        cursor: pointer;
      }

      .switch-btn-active {
        display: inline-block;
        width: 53px;
        height: 20px;
        border-radius: 15px;
        background: #FFFFFF;
        color: #7599D9;
        cursor: pointer;
      }
    }
  }

}
</style>
